<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YangchenYu'博客</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="dropdown">
        <button class="dropbtn">☰</button>
        <div class="dropdown-content">
            <a href="home.html">主页</a>
            <a href="blog.html">Blog</a>
            <a href="login.html">登录</a>
            <a href="register.html">注册</a>
        </div>
    </div>

    <header>
        <nav id="navbar">
            <ul>
                <li><a href="home.html">主页</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><button id="loginBtn">登录</button></li>
                <li><button id="registerBtn">注册</button></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home">
            <h1>欢迎来到我的博客</h1>
            <div class="contact-info">
                <h2>联系方式</h2>
                <p>邮箱: <a href="mailto:3690792235@qq.com">点击发送邮件</a></p>
                <p>电话: <a href="tel:18332190621">点击拨打电话</a></p>
                <p>微信: <a href="weixin://dl/scanqrcode">点击扫一扫</a></p>
                <p>地址: 河北省秦皇岛市海港区白塔岭街道</p>
            </div>
            <div class="about-me">
                <h2>关于我</h2>
                <p>这里是关于我的个人介绍...</p>
            </div>
            <!-- 登录方式 -->
             <div class="login-options">
                <h2>登录方式</h2>
                <p>你可以使用以下方式登录：</p>
                <ul>
                    <li>Twitter登录：<a href="https://twitter.com/" target="_blank">点击登录</a></li>
                    <li>微博登录：<a href="https://passport.weibo.com/sso/signin?entry=wapsso&source=wapssowb&url=https%3A%2F%2Fweibo.cn" target="_blank">点击登录</a></li>
                    <li>微信登录: <a href="https://wx.qq.com/" target="_blank">点击登录</a></li>
                    <li>支付宝登录: <a href="https://auth.alipay.com/login/index.htm" target="_blank">点击登录</a></li>
                    <li>QQ登录：<a href="https://im.qq.com/index/" target="_blank">点击登录</a></li>
                </ul>
            </div>
            <div class="featured-post">
                <h2>精选文章</h2>
                <p>
                    Java集合框架详解
标题：深入理解Java集合框架<br/>
内容：<br/>
Java集合框架是Java标准库的一部分，提供了许多用于存储和操作对象集合的数据结构。本文将详细介绍Java集合框架的核心接口和类。
<br/>
                1. 集合框架概述

                Collection接口：是最基本的集合接口，定义了集合的基本操作，如添加、删除和遍历元素。
                List接口：有序集合，允许重复元素。常用的实现类有ArrayList和LinkedList。
                Set接口：无序集合，不允许重复元素。常用的实现类有HashSet和TreeSet。
                Map接口：键值对集合，键唯一。常用的实现类有HashMap和TreeMap。
                <br/>2. List接口

                ArrayList：基于数组实现，支持快速随机访问。
                LinkedList：基于双向链表实现，支持高效的插入和删除操作。
                <br/>3. Set接口

                HashSet：基于哈希表实现，不保证元素的顺序。
                TreeSet：基于红黑树实现，元素按自然顺序或指定的比较器顺序排列。
                <br/>4. Map接口

                HashMap：基于哈希表实现，允许一个null键和多个null值。
                TreeMap：基于红黑树实现，键按自然顺序或指定的比较器顺序排列。
                <br/>5. 示例代码<br/>
                    <code style="font-size: 18px;">
                        import java.util.ArrayList;<br/>
                        import java.util.List;<br/>

                        public class ListExample {<br/>
                            public static void main(String[] args) {<br/>
       &nbsp;&nbsp;&nbsp;&nbsp; List<String> list = new ArrayList<>();<br/>
       &nbsp;&nbsp;&nbsp;&nbsp; list.add("Apple");<br/>
       &nbsp;&nbsp;&nbsp;&nbsp; list.add("Banana");<br/>
       &nbsp;&nbsp;&nbsp;&nbsp; list.add("Cherry");<br/>

       &nbsp;&nbsp;&nbsp;&nbsp; for (String fruit : list) {<br/>
        &nbsp;&nbsp;&nbsp;&nbsp;     System.out.println(fruit);<br/>
       &nbsp;&nbsp;&nbsp;&nbsp; }<br/>
       &nbsp;&nbsp;       }<br/>
                        }<br/>
                    </code>

                </p>
            </div>
            <div class="blog-announcement">
                <h2>博客公告</h2>
                <p>
                    ### 博客公告<br/>
                    
                    #### 最新动态与更新<br/>
                    
                    尊敬的读者们，<br/>
                    
                    感谢大家一直以来对我的博客的支持和关注！为了给大家带来更好的阅读体验，近期我对博客进行了一些重要的更新和改进。以下是具体的变化和新增内容：
                    
                    <br/>1. **全新主题上线**：
                       - 我们为博客换上了全新的主题，旨在提供更加美观和舒适的阅读体验。新的主题优化了页面布局，增强了移动端的适配性，确保您在任何设备上都能流畅阅读。
                    
                       <br/> 2. **分类导航优化**：
                       - 为了方便大家查找感兴趣的文章，我们对博客的分类导航进行了优化。现在，您可以通过顶部导航栏快速跳转到不同的分类页面，轻松找到您想看的内容。
                    
                       <br/> 3. **新增文章推荐功能**：
                       - 在每篇文章的底部，我们新增了“相关文章推荐”功能。系统会根据您的阅读历史和兴趣，为您推荐更多相关的高质量文章，帮助您发现更多精彩内容。
                    
                       <br/> 4. **评论系统升级**：
                       - 为了增强互动性，我们对评论系统进行了全面升级。现在，您可以更加方便地发表评论、回复其他读者的留言，并且可以使用表情符号和图片，让交流更加生动有趣。
                    
                       <br/>5. **技术文章专栏**：
                       - 我们新开设了一个技术文章专栏，专注于分享编程、算法、数据结构等方面的知识。如果您对技术感兴趣，不妨关注一下这个专栏，相信会对您有所帮助。
                    
                       <br/>6. **订阅功能上线**：
                       - 如果您喜欢我的博客，可以订阅我们的邮件通知服务。每当有新的文章发布时，您将会收到邮件提醒，确保不会错过任何精彩内容。
                    
                       <br/>如果您在使用过程中遇到任何问题或有任何建议，欢迎随时通过下方的联系方式与我联系。您的反馈和支持是我不断改进的动力！
                    
                    再次感谢大家的支持，祝您阅读愉快！
                
                </p>
            </div>
        </section>

        <section id="blog">
            <h1>我的Blog</h1>
            <p>
                <p>
                    <a href="blog.html">博客</a>
                </p>
            </p>
        </section>
    </main>

    <footer>
        <p>Pursue、&copy; 2024 杨晨雨个人博客. 版权所有.</p>
        
    </footer>

    <script src="script/script.js"></script>
</body>
</html>